layui.use(['form', 'jquery', 'element'], function(){
    let $ = layui.jquery,
        form = layui.form,
        upload = layui.upload,
        element = layui.element;
    
    // 支付类型与对应的子类型配置
    const typeConfig = {
        alipay: {
            elementId: 'type_alipay',
            tipName: '备注',
            message: '确保所有信息填写正确哦'
        },
        qqpay: {
            elementId: 'type_qqpay',
            tipName: '收款QQ号',
            message: '以上必须填写即将登陆QQ号,否则无法成功登陆上'
        },
        wxpay: {
            elementId: 'type_wxpay',
            tipName: '微信昵称',
            message: '以上必须填写即将登陆微信的完整[微信昵称],不要带花里胡哨的昵称,否则无法成功登陆上'
        }
    };

    // 通用显示/隐藏元素函数
    function toggleElements(showId, hideIds) {
        hideIds.forEach(id => $(`#${id}`).hide());
        if (showId) $(`#${showId}`).show();
    }

    // 更新提示信息
    function updateTips(tipName, message, beizhu = '') {
        $('#beizhu_name').html(tipName);
        $('#LoginQrcode_msg').html(message);
        $('#beizhu').val(beizhu);
    }

    // 支付类型切换监听
    form.on('select(type)', function(data) {
        const type = data.value;
        const config = typeConfig[type] || {tipName:'备注' , message:'确保所有信息填写正确哦'};
        // 清空除type外的所有input值
        $('input[type="text"]').val('');  // 清空所有文本输入框
        $('textarea').val('');  // 清空所有文本域
        $('select:not([name="type"])').val('');  // 清空除type外的所有select
        form.render('select');  // 重新渲染select
        
        // 隐藏所有支付类型相关元素
        toggleElements(config.elementId, ['type_alipay', 'type_qqpay', 'type_wxpay']);
        
        // 更新提示信息
        updateTips(config.tipName || '', config.message || '', '');
        
        // 额外的显示/隐藏逻辑
        if (type !== 'alipay') {
            toggleElements(null, ['type_alipaymck', 'type_alipaydmf']);
        }
        if (type !== 'wxpay') {
            toggleElements(null, ['type_wxpaysc', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpaymac', 'type_wxpayUos']);
        }
    });

    // 支付宝子类型监听
    form.on('select(alipay)', function(data) {
        const type = data.value;
        // 清空除type外的所有input值
        $('input[type="text"]').val('');  // 清空所有文本输入框
        $('textarea').val('');  // 清空所有文本域
        $('select:not([name="type"]):not([name="alipay"])').val('');  // 清空除type外的所有select
        form.render('select');  // 重新渲染select
        if (type === '4') {
            toggleElements('type_alipaymck', ['type_alipaydmf']);
        } else if (type === '5') {
            toggleElements('type_alipaydmf', ['type_alipaymck']);
        } else if (['1', '2', '3'].includes(type)) {
            toggleElements(null, ['type_alipaymck', 'type_alipaydmf']);
        }
    });

    // 文件上传处理
    function initFileUpload(uploadFunction) {
        // 添加动画样式
        const style = document.createElement('style');
        style.textContent = `
            .loading-icon {
                display: inline-block;
                animation: loading-rotate 1s linear infinite;
            }
            @keyframes loading-rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);
    
        let loadingIndex;
        
        upload.render({
            elem: '#ongImg',
            url: '/user/ajax/'+ uploadFunction,
            auto: true,
            accept: 'images',
            before: function(obj) {
                // 显示loading动画
                loadingIndex = layer.msg('上传中...', {
                    icon: 16,
                    shade: 0.3,
                    time: 0
                });
                // 添加旋转图标到上传按钮
                $('#ongImg').find('.layui-icon').addClass('loading-icon');
            },
            done: function(res) {
                // 关闭loading动画
                layer.close(loadingIndex);
                // 移除旋转效果
                $('#ongImg').find('.layui-icon').removeClass('loading-icon');
                
                if (res.code == 200) {
                    layer.msg('解码成功', {
                        icon: 1,
                        time: 1000
                    }, function() {
                        $('#qr_url').val(res.qr_url);
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            },
            error: function() {
                // 关闭loading动画
                layer.close(loadingIndex);
                // 移除旋转效果
                $('#ongImg').find('.layui-icon').removeClass('loading-icon');
                
                layer.msg('上传失败，请重试', {
                    icon: 2,
                    time: 2000
                });
            }
        });
    }

    // 微信支付类型监听
    form.on('select(wxpay)', function(data) {
        const type = data.value;
        $('input[type="text"]').val('');  // 清空所有文本输入框
        $('textarea').val('');  // 清空所有文本域
        $('select:not([name="type"]):not([name="wxpay"])').val('');  // 清空除type外的所有select
        form.render('select');  // 重新渲染select
        if (type === '1') {
            toggleElements('type_wxpaysc', ['type_wxpaymac', 'type_wxpayUos','type_wxpayIpad']);
            $('#type_wxpayurl, #type_wxpaydy').show();
            initFileUpload('Upload');
        } else if (type === '2') {
            toggleElements('type_wxpaymac', ['type_wxpaysc','type_wxpayIpad', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpayUos']);
        } else if (type === '3') {
            toggleElements('type_wxpayUos', ['type_wxpaysc','type_wxpayIpad', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpaymac']);
        } else if(type === '4'){
            toggleElements('type_wxpayIpad', ['type_wxpaysc', 'type_wxpayUos', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpaymac']);
        }else{
            toggleElements(null, ['type_wxpaysc','type_wxpaymac','type_wxpayIpad', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpayUos']);
        }
    });

    // Mac类型监听
    form.on('select(mactype)', function(data) {
        const type = data.value;
        $('input[type="text"]').val('');  // 清空所有文本输入框
        $('textarea').val('');  // 清空所有文本域
        $('select:not([name="type"]):not([name="wxpay"]):not([name="mactype"])').val('');  // 清空除type外的所有select
        form.render('select');  // 重新渲染select
        if (type === '8' || type === '9' || type === '10') {
            toggleElements('type_wxpaymac', []);
            $('#type_wxpaysc, #type_wxpayurl').show();
            initFileUpload(type === '8' ? 'Upload1' : 'Upload');
        }else{
            toggleElements('type_wxpaymac', ['type_wxpaysc','type_wxpayIpad', 'type_wxpayurl', 'type_wxpaydy', 'type_wxpayUos']);
        }
    });

    form.on('select(Uostype)', function(data) {
        const type = data.value;
        $('input[type="text"]').val('');  // 清空所有文本输入框
        $('textarea').val('');  // 清空所有文本域
        $('select:not([name="type"]):not([name="wxpay"]):not([name="Uostype"])').val('');  // 清空除type外的所有select
        form.render('select');  // 重新渲染select
        if (['3', '4', '5', '6'].includes(type)) {
            toggleElements('type_wxpayuos', ['type_wxpaymac']);
            $('#type_wxpaysc, #type_wxpayurl').show();
            initFileUpload(['4'].includes(type) ? 'Upload1' : 'Upload');
        }
    });

    form.on('submit(addSave)', function(data){
        $.ajax({
			data: JSON.stringify(data.field),
			url: "/user/ajax/Add_qrlist",
			contentType: 'application/json',
			dataType: 'json',
			type: 'post',
			success: function(res) {
				if (res.code == 200) {
					layer.msg(res.msg, {
						icon: 1,
						time: 1000
					}, function() {
						parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
						parent.layui.table.reload("dataTable");
					});
				} else {
					layer.msg(res.msg, {
						icon: 2,
						time: 1000
					});
				}
			},
			error:function(){
			    layer.msg("服务器错误！", {
                    icon: 2,
                    time: 1000
                });
			}
		})
        return false;
    });
});